<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html >
<html lang="zh-CN">
  <head>
 
    
    <title>测试topo图</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	 <script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/jtopo-min.js"></script>
	
  </head>
  
  <body>
 <div style="padding-left: 20%;padding-top: 7%"><canvas id="canvas" width="1000" height="600" style="border: 1px solid rgb(68, 68, 68); cursor: default; background-color: rgb(238, 238, 238);"> </canvas>  
   </div>
  <script type="text/javascript">
    	   //获取画布
			var canvas = document.getElementById('canvas');
			//将画布设置为Stage对象
			var stage = new JTopo.Stage(canvas);
			//设置当前舞台播放的帧数/秒 小于零只有键盘鼠标动作是才绘制
			stage.frames = -24;
			//显示工具栏
			//showJTopoToobar(stage);
			/**将stage对象转换为scene对象 相当于oc中的view 
			 用来作为视图的基层 可以设置scene的属性来实现不同的效果
			*/
			var scene = new JTopo.Scene(stage);	
			//设置背景颜色
			scene.background = './img/bg.jpg';
			
			// 节点
			function newNode(x, y, w, h, text){
				var node = new JTopo.Node(text);
				node.setLocation(x, y);
				node.setSize(w, h);
				scene.add(node);
				return node;
			}
				
			// 简单连线
			function newLink(nodeA, nodeZ, text,dashedPattern){
				var link = new JTopo.Link(nodeA, nodeZ, text);		
				link.lineWidth = 3; // 线宽
				link.bundleOffset = 60; // 折线拐角处的长度
				link.bundleGap = 20; // 线条之间的间隔
				link.textOffsetY = 3; // 文本偏移量（向下3个像素）
				link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
				link.dashedPattern = dashedPattern; 
				scene.add(link);
				return link;
			}
			/*生成方块对象 
			四个参数 分别对应 x坐标 y坐标 方块的宽  方块的高  方块的文字描述
			*/
			var fromNode = newNode(100, 80, 60, 60, 'from');
			//设置方块时候可以被拖动
			fromNode.dragable=false;
			//设置字体的颜色
			fromNode.fontColor=JTopo.util.randomColor();
			var node = newNode(360, 250, 60, 60, 'to');
			//添加连线
			for(var i=0; i<5; i++){
				newLink(fromNode, node, 'Link' + i);		
			}
			newLink(fromNode, node, 'last',0);
			
			// ---------- FoldLink
			/**
			参数分别对应链接的对象的  文字描述 ,direction设置方向  dashedPattern设置虚线的大小
			*/
			function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern){
				var link = new JTopo.FoldLink(nodeA, nodeZ, text);
				//设置方向
				link.direction = direction || 'horizontal';
				link.arrowsRadius = 15; //箭头大小
				link.lineWidth = 3; // 线宽
				link.bundleOffset = 60; // 折线拐角处的长度
				link.bundleGap = 20; // 线条之间的间隔
				link.textOffsetY = 3; // 文本偏移量（向下3个像素）
				link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
				link.dashedPattern = dashedPattern; //设置虚线度
				scene.add(link);
				return link;
			}
			
			var fromNode = newNode(100, 320, 60, 60, 'from');	
			var node = newNode(300, 470, 60, 60, 'to');
			
			newFoldLink(fromNode, node, 'up');
			newFoldLink(fromNode, node, 'down', 'vertical');


			// -----------FlexionalLink
			function newFlexionalLink(nodeA, nodeZ, text, dashedPattern){
				var link = new JTopo.FlexionalLink(nodeA, nodeZ, text);
				link.arrowsRadius = 10;
				link.lineWidth = 3; // 线宽
				link.offsetGap = 30;
				link.bundleGap = 15; // 线条之间的间隔
				link.textOffsetY = 10; // 文本偏移量（向下15个像素）
				link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
				link.dashedPattern = dashedPattern; 
				scene.add(link);
				return link;
			}
			var fromNode = new JTopo.Node('from');
			fromNode.setSize(60, 60);
			fromNode.setLocation(500, 60);
			scene.add(fromNode);
			
			var node = new JTopo.Node("to");	
			node.setSize(60, 60);
			node.setLocation(545, 220);
			scene.add(node);
			
			for(var i=0; i<2; i++){
				newFlexionalLink(fromNode, node, 'u' + i, 3);
				newFlexionalLink(node, fromNode);
			}
			
			// --------- loop
			var loopNode = new JTopo.Node("loop");		
			loopNode.setLocation(600, 400);
			scene.add(loopNode);
			for(var i=0; i<3; i++){
				var link = new JTopo.Link(loopNode, loopNode);
				link.text = 'L'+i;		
				link.lineWidth = 3; // 线宽
				link.bundleGap = 30; // 线条之间的间隔
				link.textOffsetY = 3; // 文本偏移量（向下3个像素）
				link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
				link.type = 'loop'; // 自定义属性
				scene.add(link);
			}
		
	
     </script>
     
  </body>
 
 	
</html>
